<template>
  <div class="main">
    <el-row :gutter="20">
      <el-col :span="4">
        <p class="label-form"> 申请单号：</p>
        <el-input v-model="queryParams.orderSn"  placeholder="申请单号"></el-input>
      </el-col>
      <el-col :span="4">
        <p class="label-form"> 用户手机号：</p>
        <el-input v-model="queryParams.userPhone"  placeholder="用户手机号"></el-input>
      </el-col>
      <!--      <el-col :span="4">-->
      <!--        <p class="label-form"> 状态：</p>-->
      <!--        <el-select style="width: 100%;" clearable v-model="queryParams.status" placeholder="请选择">-->
      <!--          <el-option-->
      <!--            v-for="item in messageType"-->
      <!--            :key="item.dictValue"-->
      <!--            :label="item.dictLabel"-->
      <!--            :value="Number(item.dictValue)">-->
      <!--          </el-option>-->
      <!--        </el-select>-->
      <!--      </el-col>-->
<!--      <el-col :span="4">-->
<!--        <p class="label-form"> 申请类型：</p>-->
<!--        <el-select style="width: 100%;" clearable v-model="queryParams.type" placeholder="请选择">-->
<!--          <el-option-->
<!--            v-for="item in optionsType"-->
<!--            :key="item.dictValue"-->
<!--            :label="item.dictLabel"-->
<!--            :value="Number(item.dictValue)">-->
<!--          </el-option>-->
<!--        </el-select>-->
<!--      </el-col>-->
      <el-col :span="4">
        <p class="label-form"> 时间：</p>
        <el-date-picker
          clearable
          v-model="createTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-col>
      <el-col :span="6" style="margin-left: 150px">
        <p class="label-form"></p>
        <el-button type="primary" @click="getSelect"  icon="el-icon-search">搜索</el-button>
        <el-button type="warning" @click="resert" icon="el-icon-refresh-right">重置</el-button>
      </el-col>
    </el-row>

    <!--    <el-row :gutter="20" style="margin-top: 10px">-->
    <!--      <el-col :span="4">-->
    <!--        <el-button @click="addShop" type="primary" icon="el-icon-plus">新增</el-button>-->
    <!--      </el-col>-->
    <!--    </el-row>-->

    <el-table :data="tableData"
              row-key="id"
              max-height="600"
              :expand-row-keys="expandedRowKeys"
              @expand-change="handleExpand"
              border style="margin-top: 30px">

      <el-table-column prop="id" align="center" min-width="80" label="ID"></el-table-column>
      <el-table-column prop="orderSn" min-width="200" label="申请单号"></el-table-column>
      <el-table-column prop="userPhone" width="200"  label="用户手机号 "></el-table-column>
      <el-table-column prop="licensePlate" width="200"  label="车牌号 "></el-table-column>
      <el-table-column prop="question" width="200" show-overflow-tooltip label="问题描述 "></el-table-column>
      <el-table-column prop="status" width="200" label="审核意见">
        <template slot-scope="scope">
          <p><b>审核状态：</b>{{ scope.row.status === 1 ? '审核中' : scope.row.status === 2 ? '审核通过' : '已驳回' }}
          </p>
          <p v-if="/3/.test(scope.row.status)"><b>驳回理由：</b>{{ scope.row.reply || '暂无数据' }}</p>
        </template>
      </el-table-column>
      <el-table-column prop="storeName" width="200"  label="安装门店 "></el-table-column>
      <el-table-column prop="storeAddress" width="200"  label="店铺位置 "></el-table-column>
      <el-table-column prop="price" label="轮胎位置" min-width="150">
        <template slot-scope="scope">

          {{position(Number(scope.row.position))}}
        </template>
      </el-table-column>
      <el-table-column prop="code" label="条形码" min-width="150">  </el-table-column>
      <el-table-column prop="patnm" label="花纹" min-width="150"> </el-table-column>
      <el-table-column prop="spcnm" label="规格" min-width="150"></el-table-column>
      <el-table-column prop="brnm" label="品牌" min-width="150"></el-table-column>
      <el-table-column prop="erpid" label="物料编码" min-width="150"></el-table-column>
      <el-table-column prop="scmnm" label="客户编码" min-width="150"></el-table-column>
      <el-table-column prop="dot" label="DOT" min-width="150"></el-table-column>


      <el-table-column width="200"  label="审核状态 ">
        <template slot-scope="scope">
          {{status(scope.row.isAudit)}}
        </template>
      </el-table-column>
      <el-table-column min-width="180"  prop="status" label="创建时间">
        <template slot-scope="scope">
          {{ parseTime(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" width="280" align="center" label="操作">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status ===1 && scope.row.isAudit===0" size="mini" type="success" icon="el-icon-check" @click="checkedOrder(scope.row)">通过</el-button>
          <el-button v-if="scope.row.status ===1 && scope.row.isAudit===0" type="primary" size="mini" icon="el-icon-edit" @click="reject(scope.row)">驳回</el-button>
          <el-button v-if="scope.row.status ===3 && scope.row.isAudit===1" type="primary" size="mini" icon="el-icon-view" @click="viewReject(scope.row)">查看理由</el-button>
          <el-button type="primary" size="mini" @click="verifyDetail(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>





    <el-dialog
      title="申请详情"
      :visible.sync="payStatus"
      width="1200px"
      :before-close="handleClosePayStatus">
      <el-form ref="form" size="mini" :model="form" label-width="120px">
        <el-form-item label="申请单号">{{form.orderSn}}</el-form-item>
        <el-form-item label="用户手机号">{{form.userInfo.phone}}</el-form-item>
        <el-form-item label="车牌号">{{form.carInfo.licensePlate}}</el-form-item>
        <el-form-item label="理赔轮胎">
          <el-table
            :data="tyreListArray"
            border
            style="width: 100%">
            <el-table-column prop="code" label="条形码" min-width="150">  </el-table-column>
            <el-table-column prop="patnm" label="花纹" min-width="150"> </el-table-column>
            <el-table-column prop="spcnm" label="规格" min-width="150"></el-table-column>
            <el-table-column prop="brnm" label="品牌" min-width="150"></el-table-column>
            <el-table-column prop="erpid" label="物料编码" min-width="150"></el-table-column>
            <el-table-column prop="scmnm" label="客户编码" min-width="150"></el-table-column>
            <el-table-column prop="dot" label="DOT" min-width="150"></el-table-column>
            <el-table-column prop="createTime" label="安装时间" min-width="180">
              <template slot-scope="scope">

                {{parseTime(scope.row.createTime)}}
              </template>
            </el-table-column>
            <el-table-column prop="price" label="轮胎位置" min-width="150">
              <template slot-scope="scope">

                {{position(scope.row.position)}}
              </template>
            </el-table-column>
            <el-table-column prop="price" label="是否允许理赔" min-width="150">
              <template slot-scope="scope">

                {{scope.row.isReparation ===1 ? '否':'是'}}
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>

        <el-form-item label="理赔图片">
          <el-image style="width: 100px; height: 100px;margin-left: 10px" :src="form.request.carImg" :preview-src-list="[form.request.carImg]"></el-image>
          <el-image style="width: 100px; height: 100px;margin-left: 10px" :src="form.request.dotImg" :preview-src-list="[form.request.dotImg]"></el-image>
          <el-image style="width: 100px; height: 100px;margin-left: 10px" :src="form.request.driveLicenseImg" :preview-src-list="[form.request.driveLicenseImg]"></el-image>
          <el-image style="width: 100px; height: 100px;margin-left: 10px" :src="form.request.pattenImg" :preview-src-list="[form.request.pattenImg]"></el-image>
          <el-image style="width: 100px; height: 100px;margin-left: 10px" :src="form.request.img" :preview-src-list="[form.request.img]"></el-image>
        </el-form-item>
        <el-form-item label="鼓包视频" v-if="form.request.videoUrl">
          <video class="video" :src="form.request.videoUrl"
                 controls autoplay="false" preload="metadata"
                 :show-center-play-btn="true" :enable-progress-gesture="true" :initial-time="0"
                 :object-fit="'contain'" :show-loading="true" :show-mute-btn="true"
          />

        </el-form-item>
        <el-form-item label="安装门店">{{form.storeInfo.name}}</el-form-item>
        <el-form-item label="店铺位置">{{form.storeInfo.address}}</el-form-item>
        <el-form-item label="轮胎品牌">{{form.tyre.name}}</el-form-item>
        <el-form-item label="问题描述">{{form.request.question}}</el-form-item>
        <el-form-item label="审核状态">
          {{form.request.isAudit === 1 ? '已审核':'未审核'}}
        </el-form-item>
        <el-form-item label="备注">
          {{ form.request.reply || '暂无描述' }}
        </el-form-item>
<!--        <el-form-item label="创建时间">-->
<!--          {{ parseTime(form.createTime) }}-->
<!--        </el-form-item>-->
      </el-form>

      <span slot="footer" class="dialog-footer">

        <el-button type="primary" @click="payStatus = false">关闭</el-button>
      </span>
    </el-dialog>



    <div class="box-pager">
      <pagination
        v-show="pager.total>0"
        :total="pager.total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getListsPage"
      />
    </div>
    <div class="safe"></div>


  </div>
</template>

<script>
import {parseTime} from "@/utils/ruoyi";
import axios from "axios";
import {
  claimApplicationList, claimApplicationListById, claimRequestEdit,
  getDict,
  getEquipment,
  getRequestArray,
  updateInstallTyre,
  updateRequestStatus,
  userTyreList
} from "@/api/apiFox";

export default {
  data() {
    return {

      currentPage1: 5,
      value1: '',
      pager: {
        total:10
      },
      formData:{},
      form: {
        userInfo:{},
        carInfo:{},
        request:{},
        storeInfo:{},
        tyre:{}
      },
      dialogVisible: false,
      isEdit: false,
      payStatus:false,
      dialogVisibleTyre:false,
      mark: {lng: '', lat: ''},
      content:"",
      tyreListArray:[],
      materialScienceList:[
        {id:1,name:"螺栓",num:"1",price:"25.15"}
      ],
      tyreList:[],
      tableData: [],
      queryParams:{
        pageNum:1,
        pageSize:10,
        userPhone:"",
        isAudit:0,
        status:"",
        type:"",
        orderSn:""
      },
      createTime:[],
      loading:false,
      messageType:[],
      expandedRowKeys:[],
      options: [
        {value: 0, label: '待处理'},
        {value: 1, label: '已处理'},

      ],
      postions:[
        {value: 1, label: '左前'},
        {value: 2, label: '右前'},
        {value: 3, label: '左后'},
        {value: 4, label: '右后'},
      ],
      optionsType:[],
    }
  },
  created() {
    this.getDictList('apply_status')
    this.getDictList2('apply_status')
  },
  watch:{
    createTime(newValue,oldValue){
      console.log(newValue)
      if (newValue && newValue.length>0){
        this.queryParams.beginTime = parseTime(newValue[0])
        this.queryParams.endTime = parseTime(newValue[1])
      }else{
        this.queryParams.beginTime = null
        this.queryParams.endTime =null
      }
    }
  },
  mounted() {
    this.getLists(this.queryParams)
  },
  methods: {
    verifyDetail(item){
      this.payStatus = true
      claimApplicationListById({id:item.id}).then(res=>{
        this.form = res
        this.tyreListArray = [res.beforeTyreInfo]
      }).catch(err=>{
        this.payStatus=false
      })
    },

    getDictList(item){
      getDict(item).then(res=>{
        console.log(res)
        this.messageType = res
      })
    },
    getDictList2(item){
      getDict(item).then(res=>{
        this.optionsType = res
      })
    },
    getListsPage(e){
      this.queryParams.pageNum = e.page
      this.queryParams.pageSize = e.limit
      this.getLists(this.queryParams)
    },
    resert(){
      this.queryParams={
        pageNum:1,
        pageSize:10,
        phone:"",
        status:"",
        isAudit:0,
        type:""
      }
      this.getLists(this.queryParams)
    },
    getSelect(){
      this.getLists(this.queryParams)
    },
    parseTime,
    getLists(params) {
      claimApplicationList(params).then(res=>{
        console.log(res)
        this.pager.total=res.total
        this.tableData =res.rows
      })
    },

    handleExpand(row,expandedRows) {
      this.loading=true
      const currentRowId = row.id;
      this.tyreForm = row
      const index = this.expandedRowKeys.indexOf(currentRowId);
      if (index === -1) {

        this.expandedRowKeys = [currentRowId];
      } else {
        this.expandedRowKeys = [];
      }
      console.log(row)
      this.getTyre(row.carId)
    },



    getTyre(item){
      userTyreList({carId:item}).then(res=>{
        console.log(res)
        this.tyreList = res.data
        this.loading=false
      })
    },

    addType(e){
      this.formData={}
      this.dialogVisibleTyre = true
    },

    checkedOrder(item){
      console.log(item)
      this.$confirm('是否通过', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        claimRequestEdit({id:item.id,status:2,isAudit:1}).then(res=>{
          this.$message.success('审核通过')
          this.getLists(this.queryParams)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });

    },
    viewReject(row){
      this.$alert(row.reply, '驳回理由', {
        confirmButtonText: '关闭',
        callback: action => {

        }
      });

    },

    reject(row){
      this.$prompt('请输入驳回理由', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        claimRequestEdit({id:row.id,status:3,reply:value,isAudit:1}).then(res=>{
          this.$message.success('已驳回')
          this.getLists(this.queryParams)
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },


    handleCloseTyre(){
      this.dialogVisibleTyre =false
    },
    handleClosePayStatus(){
      this.payStatus = false
    },
    setMark(e) {
      console.log(e)
      this.mark = {lng: e.point.lng, lat: e.point.lat}
      this.reverseGeocode(e.point.lat,e.point.lng)
    },
    updateShop(item) {
      this.dialogVisible = true
      this.form = item
      this.mark = {lng: item.longitude, lat: item.latitude}
      this.center = {lng: item.longitude, lat: item.latitude}
      this.isEdit = true
    },
    viewShop(item) {
      this.dialogVisible = true
      this.form = item
      this.mark = {lng: item.longitude, lat: item.latitude}
      this.center = {lng: item.longitude, lat: item.latitude}
      this.isEdit = false
    },
    addShop() {
      this.dialogVisible = true
      this.form = {}
      this.isEdit = false
    },
    deleteTyre(item){
      console.log(item)
    },
    position(val) {
      switch (val) {
        case 1: {
          return '左前'
        }
        case 2: {
          return '右前'
        }
        case 3: {
          return '左后'
        }
        case 4: {
          return '右后'
        }
      }
    },

    handleClose() {
      this.dialogVisible = false
    },
    status(val) {
      switch (val) {
        case 0: {
          return '待处理'
        }
        case 1: {
          return '已处理'
        }


      }
    },
    requestType(val) {
      let s = this.optionsType.filter(value => {return Number(value.dictValue) === val})
      console.log(s,'request')
      if (s && s.length>0){
        return s[0].dictLabel
      }else{
        return  '暂无数据'
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  },
}
</script>


<style scoped lang="scss">
.map {
  width: 100%;
  height: 300px;
}
.video{
  width: 500px;
  height: 300px;
  object-fit: contain;
  border-radius: 5px;
}
.main {
  width: 100%;
  min-height: 100vh;
  padding: 30px;
  box-sizing: border-box;

  .label {
    font-size: 14px;
    height: 20px;
    margin-bottom: 5px;
  }
}

.grid-content {
  height: 40px;
  text-align: right;
  line-height: 40px;
}

.bg-purple {
  font-size: 14px;
  color: #3f3f3f;
}
.box-item{
  width: 100%;
  .title{
    font-size: 12px;
    color: #1e1e1e;
    font-weight: 600;
    margin: 0;
  }
  .title-content{
    width: 100%;
    font-size: 12px;
    color: #2c3e50;
    margin: 0;
  }
}
</style>
